<template>
  <div class="vs-sys-right-header">
    <div class="sys-name" @click="goToIndex">
      <span>{{ sysName }}</span>
    </div>
    <div class="sys-time">
      <span class="sys-time__hour">{{ hour }}</span>
      <span class="sys-time__border"></span>
      <span class="sys-time__day">
        <span>{{ year }}</span>
        <label>{{ day }}</label>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "VsSysRightHeader",
  components: {},
  filters: {},
  props: {},
  data() {
    return {
      data: {
        dataInfo: [
          {
            addressName: "黔江区",
            addressCode: "5001140000",
            total: 10689,
            approvalInfo: {
              expand: 0,
              first: 854,
              newBuild: 854,
              nowDo: 2399,
              overTime: 12,
              rebuild: 9835,
              second: 631,
              third: 926
            }
          }
        ]
      },
      hour: "",
      year: "",
      day: "",
      sysName: "农委宅基地审批系统",
      timer: null,
      timerSeconds: 1
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getTimeNew();
    if (this.timerSeconds < 60) {
      this.timer = setInterval(() => {
        this.getTimeNew();
        this.timerSeconds = 60;
      }, this.timerSeconds);
    } else {
      this.timer = setInterval(() => {
        this.getTimeNew();
      }, 1000 * 60);
    }
  },
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    goToIndex: function() {
      this.$router.push({
        path: "/login"
      });
    },
    getTimeNew() {
      const date = new Date();
      let year = date.getFullYear();
      let m = date.getMonth() + 1;
      let day = date.getDate();
      let s = date.getHours();
      let h = date.getMinutes();
      let _s = date.getSeconds();
      m = m > 9 ? m : "0" + m;
      day = day > 9 ? day : "0" + day;
      s = s > 9 ? s : "0" + s;
      h = h > 9 ? h : "0" + h;
      // _s = _s > 9 ? _s : "0" + _s;

      const _hour = `${s}:${h}`;
      const _day = `${m}-${day}`;
      this.hour = _hour;
      this.year = year;
      this.day = _day;
      this.timerSeconds = this.timerSeconds == 60 ? 60 : 60 - _s;
    }
  }
};
</script>

<style lang="less">
.vs-sys-right-header {
  margin-top: 10px !important;
  height: 52px;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  cursor: pointer;

  .sys-name {
    box-sizing: border-box;
    width: 221px;
    font-family: PingFangSC-Semibold;
    font-size: 22px;
    text-align: center;
    line-height: 52px;
    background-color: rgba(72, 252, 235, 0.1);
    border-right: 1px solid rgba(72, 252, 235, 0.5);
    border-left: 1px solid rgba(72, 252, 235, 0.5);
    z-index: 999;
    &:hover {
      background-color: rgba(72, 252, 235, 0.2);
    }
  }

  .sys-time {
    width: 166px;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    padding: 0 20px;

    &__hour {
      font-family: antonio-bold;
      width: 76px;
      text-align: center;
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 2px;
    }

    &__border {
      width: 1px;
      height: 10px;
      box-sizing: border-box;
      background-color: #ffffff;
    }

    &__day {
      margin-left: 2px;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      letter-spacing: 0;
      width: 42px;
      text-align: center;
      font-family: PingFangSC-Semibold;
    }
  }
}
</style>
